<template>
  <view class="my-total">
    <view class="one">
      <label class="radio">
        <radio :checked="isAll" color="#c00000" @click="radioClick" /><text>全选</text>
      </label>
    </view>
    <view class="two">
      合计：<text>￥{{totalMoney}}</text>
    </view>
    <view class="three" @click="pay">
      结算（{{newTotal}}）
    </view>
  </view>
</template>

<script>
  import {
    mapGetters,
    mapState
  } from 'vuex'
  export default {
    name: "my-total",
    data() {
      return {
        totalTime: 0
      };
    },
    computed: {
      ...mapState('cart', ['address', 'cart']),
      ...mapState('user', ['token']),
      ...mapGetters('cart', ['newTotal', 'totalMoney', 'isAll'])
    },
    methods: {
      radioClick() {
        // 修改购物车选中状态，如果isAll是true,点击后所有商品取消选择，如果isAll是false,点击后所有商品全部选中
        this.$store.commit('cart/selectAll', !this.isAll)
        // if (this.isAll) {
        //   this.$store.commit('cart/selectAll', false)
        // } else {
        //   this.$store.commit('cart/selectAll', true)
        // }
      },
      // 结算点击事件
      async pay() {
        // 1:有地址
        //  "{}"
        if (JSON.stringify(this.address) === "{}") {
          return uni.showToast({
            title: "请先选择地址",
            icon: 'none',
            mask: true
          })
        }
        // 2：有勾选商品
        if (this.newTotal === 0) {
          return uni.showToast({
            title: "请先选择商品",
            icon: 'none',
            mask: true
          })
        }
        // 3：有token
        if (!this.token) {
          // return uni.showToast({
          //   title: "请先登录",
          //   icon: 'none',
          //   mask: true
          // })
          // uni.switchTab({
          //   url: '/pages/my/my'
          // })
          // 提示
          return this.backTime()
        }
        // 产生订单
        const orderNumber = await this.createOrder()
        const payParams = await this.getPrePay(orderNumber)

        const res = await uni.requestPayment(payParams)
        // 支付成功
        uni.showToast({
          title: "支付成功",
          icon: "success",
          mask: true
        })
        // 删除购物车中已勾选商品
        this.$store.commit('cart/delHasPay')

        console.log('res', res);
      },
      // 创建订单
      async createOrder() {
        // 订单商品数据
        // 1:拿到已勾选商品
        const newList = this.cart.filter(item => item.goods_status)
        // 2:拿到接口传参所需要的数据
        const goods = newList.map(item => {
          return {
            goods_id: item.goods_id,
            goods_number: item.goods_count,
            goods_price: item.goods_price
          }
        })
        const res = await uni.$http.post('/my/orders/create', {
          data: {
            order_price: this.totalMoney,
            consignee_addr: this.address.provinceName + this.address.cityName + this.address.countyName + this
              .address.detailInfo,
            goods: goods
          }
        })
        // console.log('订单号', res);
        return res.message.order_number
      },
      // 获取预支付信息
      async getPrePay(orderId) {
        const res = await uni.$http.post('/my/orders/req_unifiedorder', {
          data: {
            order_number: orderId
          }
        })
        return res.message.pay
        console.log('预支付信息', res);
      },
      showTip(num) {
        uni.showToast({
          title: `请先登录后再进行结算，${num}秒后自动跳转至登录页`,
          icon: 'none',
          mask: true
        })
      },
      backTime() {
        this.totalTime = 3
        this.showTip(this.totalTime)
        const timer = setInterval(() => {
          this.totalTime--
          this.showTip(this.totalTime)
          if (this.totalTime <= 0) {
            // 清理倒计时
            clearInterval(timer)
            // 清理弹窗
            uni.hideToast()
            // 跳转至登录页
            this.$store.commit('user/setBackPath', {
              openType: 'switchTab',
              url: '/pages/cart/cart'
            })
            uni.switchTab({
              url: "/pages/my/my"
            })
          }
        }, 1000)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .my-total {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100rpx;
    display: flex;
    align-items: center;
    background-color: #fff;
    z-index: 999;

    .one {
      flex: 2;
    }

    .two {
      flex: 3;

      text {
        color: #c00000;
      }
    }

    .three {
      flex: 2;
      height: 100rpx;
      background-color: #c00000;
      color: #fff;
      text-align: center;
      line-height: 100rpx;
    }
  }
</style>